import React from 'react';
import { ModelState } from '../../types';

interface MetricsTableProps {
  metrics: ModelState['evaluationMetrics'];
}

const MetricsTable: React.FC<MetricsTableProps> = ({ metrics }) => {
  if (!metrics) {
    return (
      <div className="bg-white rounded-lg border border-gray-200 p-6 text-center shadow-sm">
        <p className="text-gray-500">No evaluation metrics available</p>
      </div>
    );
  }

  // Helper function to determine status color
  const getStatusColor = (value: number, threshold: { low: number; medium: number }) => {
    if (value >= threshold.medium) return 'bg-green-100 text-green-800';
    if (value >= threshold.low) return 'bg-yellow-100 text-yellow-800';
    return 'bg-red-100 text-red-800';
  };

  // Helper function to get status text
  const getStatusText = (value: number, threshold: { low: number; medium: number }) => {
    if (value >= threshold.medium) return 'Good';
    if (value >= threshold.low) return 'Fair';
    return 'Poor';
  };

  // Configure thresholds for each metric
  const thresholds = {
    accuracy: { low: 0.6, medium: 0.8 },
    topKAccuracy: { low: 0.8, medium: 0.9 },
    f1Score: { low: 0.6, medium: 0.8 },
    precision: { low: 0.6, medium: 0.8 },
    recall: { low: 0.6, medium: 0.8 },
  };

  return (
    <div className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
      <h3 className="text-lg font-medium text-gray-800 mb-4">Model Performance Metrics</h3>
      
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Metric
              </th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Value
              </th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Status
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            <tr>
              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                Accuracy
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {(metrics.accuracy * 100).toFixed(2)}%
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(metrics.accuracy, thresholds.accuracy)}`}>
                  {getStatusText(metrics.accuracy, thresholds.accuracy)}
                </span>
              </td>
            </tr>
            <tr>
              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                Top-K Accuracy
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {(metrics.topKAccuracy * 100).toFixed(2)}%
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(metrics.topKAccuracy, thresholds.topKAccuracy)}`}>
                  {getStatusText(metrics.topKAccuracy, thresholds.topKAccuracy)}
                </span>
              </td>
            </tr>
            <tr>
              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                F1 Score
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {(metrics.f1Score * 100).toFixed(2)}%
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(metrics.f1Score, thresholds.f1Score)}`}>
                  {getStatusText(metrics.f1Score, thresholds.f1Score)}
                </span>
              </td>
            </tr>
            <tr>
              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                Precision
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {(metrics.precision * 100).toFixed(2)}%
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(metrics.precision, thresholds.precision)}`}>
                  {getStatusText(metrics.precision, thresholds.precision)}
                </span>
              </td>
            </tr>
            <tr>
              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                Recall
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {(metrics.recall * 100).toFixed(2)}%
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(metrics.recall, thresholds.recall)}`}>
                  {getStatusText(metrics.recall, thresholds.recall)}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default MetricsTable;